import React, { Component } from 'react'
import { Tabs } from 'react-vant';
import axios from 'axios'
import Contents from './components/Contents';
export class App extends Component {
  state={
    list:[],
    actives:0,
    sonlist:[]
  }
  componentDidMount(){
    axios.get('/list').then(res =>{
      console.log(res.data[0].children)
      this.setState({
        list:res.data,
        sonlist:res.data[0].children
      })
    })
  }
  setActive =(el) => {
    console.log(el)
    this.setState({
      sonlist:this.state.list[el].children
    })
  }

  render() {
    const { list,actives,sonlist} = this.state;
   
    return (
      <div>
        
        <Tabs active={actives} onChange={
         (el)=>{
          this.setActive(el)
         }
        }>
          { list&&list.map((item,index) => (
            <Tabs.TabPane key={index} title={`${item.title}`}>
              <Contents sonlist={sonlist}></Contents>
             </Tabs.TabPane>
          ))}
        </Tabs>
      </div>
    )
  }
}

export default App